<template>
	<view class="process-container">

		<!-- 步骤展示区 -->
		<view class="step-content" v-if="currentProduct">
			<text class="step-title">步骤{{ currentStep?.stepNumber }}：{{ currentStep?.title }}</text>
			
			<!-- 步骤总体描述 -->
			<view class="step-description">
				<text class="description-text">{{ currentStep?.description }}</text>
			</view>
			
			<!-- 步骤子项列表 -->
			<scroll-view scroll-y class="step-items-container">
				<view 
					v-for="(item, index) in currentStep?.mediaList" 
					:key="index"
					class="step-item"
				>
					<text class="item-title">{{ item.mediaName }}</text>
					
					<!-- 媒体展示区 -->
					<view class="media-container">
						<image 
							v-if="item.type === 'image'"
							:src="item.media"
							mode="aspectFit"
							class="step-media"
							@click="previewImage(item.media)"
						/>
						<video
							v-else-if="item.type === 'video'"
							:src="item.media"
							class="step-media"
							controls
							show-fullscreen-btn
							enable-play-gesture
							show-play-btn
							show-center-play-btn
							:enable-progress-gesture="true"
						></video>
						<view v-else-if="item.type === 'text'" class="text-content">
							<text>{{ item.mediaName }}</text>
						</view>
					</view>
				</view>
			</scroll-view>

					<!-- <view class="step-tips" v-if="currentStep?.stepNumber === 1">
						<text class="tips-title">温馨提示：</text>
						<text class="tips-content">每个步骤的图片和描述都可以通过后台管理系统进行编辑和更新。图片支持jpg、png格式，建议尺寸为800x600像素；描述文字建议控制在100字以内，以确保最佳显示效果。</text>
					</view> -->
		</view>

		<!-- 底部按钮区 -->
		<view class="bottom-buttons" v-if="currentProduct">
			<button class="nav-btn prev-btn" @click="prevStep">上一步</button>
			<button 
				class="nav-btn next-btn" 
				@click="handleNextStep"
			>{{ isLastStep ? '查看成品' : '下一步' }}</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const currentProduct = ref(null)
const currentStepIndex = ref(0)
const isPrevStep = ref(false)
const isNextStep = ref(false)

// 获取步骤数据
const getProcessData = async (productId) => {
	try {
		console.log('开始获取步骤数据，产品ID:', productId)
		const res = await uni.request({
			url: 'https://xiaocheng.top:8209/wx/process/selectProcessByProductId?productId=' + productId,
			method: 'POST',
		})
		
		console.log('接口返回数据:', res.data)
		
		if (res.data.code === 200) {
			// 转换接口数据为页面需要的格式
			const processData = res.data.result
			const steps = []
			
			// 遍历所有步骤
			processData.forEach(stepObj => {
				const stepNumber = Object.keys(stepObj)[0]
				const stepData = stepObj[stepNumber]
				
				if (stepData && stepData.mediaList && stepData.mediaList.length > 0) {
					steps.push({
						stepNumber: parseInt(stepNumber),
						title: stepData.mediaList[0].processname,
						description: stepData.detail,
						mediaList: stepData.mediaList.map(item => {
							// 如果没有媒体路径，返回一个空的媒体对象
							if (!item.pic_ved_path) {
								return {
									type: 'text',
									media: '',
									mediaName: item.medianame
								}
							}
							return {
								type: item.pic_ved_path.toLowerCase().endsWith('.mp4') ? 'video' : 'image',
								media: item.pic_ved_path,
								mediaName: item.medianame
							}
						})
					})
				}
			})
			
			// 按步骤号排序
			steps.sort((a, b) => a.stepNumber - b.stepNumber)
			// 步骤编号重排，从1开始
			steps.forEach((step, idx) => {
				step.stepNumber = idx + 1
			})
			console.log('转换后的步骤数据:', steps)
			currentProduct.value = {
				process: steps
			}
		} else {
			uni.showToast({
				title: '获取步骤数据失败',
				icon: 'none',
				duration: 2000
			})
		}
	} catch (error) {
		console.error('获取步骤数据失败:', error)
		uni.showToast({
			title: '获取步骤数据失败',
			icon: 'none',
			duration: 2000
		})
	}
}

// 获取路由参数
onMounted(() => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const productId = currentPage.options.productId
	
	console.log('当前页面参数:', currentPage.options)
	console.log('产品ID:', productId)
	
	if (productId) {
		getProcessData(productId)
	} else {
		uni.showToast({
			title: '产品信息不存在',
			icon: 'none',
			duration: 2000
		})
	}
})

// 计算当前步骤
const currentStep = computed(() => {
	if (!currentProduct.value) return null
	return currentProduct.value.process[currentStepIndex.value]
})

// 上一步
const prevStep = () => {
	// 添加防抖处理
	if (isPrevStep.value) return
	isPrevStep.value = true
	
	if (currentStepIndex.value > 0) {
		currentStepIndex.value--
	} else {
		uni.showToast({
			title: '已经是第一步了',
			icon: 'none',
			duration: 2000
		})
	}
	
	// 延迟重置状态
	setTimeout(() => {
		isPrevStep.value = false
	}, 500)
}

// 下一步
const nextStep = () => {
	// 添加防抖处理
	if (isNextStep.value) return
	isNextStep.value = true
	
	if (currentStepIndex.value < currentProduct.value.process.length - 1) {
		currentStepIndex.value++
	} else {
		uni.showToast({
			title: '已经是最后一步了',
			icon: 'none',
			duration: 2000
		})
	}
	
	// 延迟重置状态
	setTimeout(() => {
		isNextStep.value = false
	}, 500)
}

// 禁用返回方法
const handleBack = () => {
	return false
}

// 预览图片
const previewImage = (imageUrl) => {
	uni.previewImage({
		urls: [imageUrl],
		current: imageUrl
	})
}

// 处理视频全屏变化
const onFullscreenChange = (event) => {
	console.log('视频全屏状态变化:', event.detail)
	const { fullScreen, direction } = event.detail
	
	// 获取当前视频上下文
	const videoContext = uni.createVideoContext(event.currentTarget.id)
	
	if (fullScreen) {
		// 进入全屏时的处理
		if (direction === 'vertical') {
			// 竖屏全屏
			videoContext.requestFullScreen({ direction: 0 })
		} else {
			// 横屏全屏
			videoContext.requestFullScreen({ direction: 90 })
		}
	}
}

// 计算当前是否是最后一步
const isLastStep = computed(() => {
	if (!currentProduct.value) return false
	return currentStepIndex.value === currentProduct.value.process.length - 1
})

// 跳转到成品展示页面
const goToProduct = () => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const productId = currentPage.options.productId
	
	uni.navigateTo({
		url: `/pages/product/product?productId=${productId}`
	})
}

// 处理下一步按钮点击
const handleNextStep = () => {
	if (isLastStep.value) {
		goToProduct()
	} else {
		nextStep()
	}
}
</script>

<style>
.process-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	display: flex;
	flex-direction: column;
}

/* 顶部导航样式 */
.nav-header {
	position: relative;
	padding: 20rpx 30rpx;
	background-color: #ffffff;
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	height: 88rpx;
}

.back-btn,
.back-icon,
.back-text {
	display: none;
}

.product-title {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	font-weight: 400;
	color: #333333;
}

/* 步骤内容样式 */
.step-content {
	flex: 1;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.step-title {
	font-size: 32rpx;
	color: #333333;
	margin-bottom: 20rpx;
	display: block;
	font-weight: 500;
}

/* 步骤子项列表样式 */
.step-items-container {
	flex: 1;
	background-color: #ffffff;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
	height: 80vh;
}

.step-item {
	padding: 30rpx;
	border-bottom: 1px solid #e5e5e5;
}

.item-title {
	font-size: 28rpx;
	color: #333333;
	margin-bottom: 20rpx;
	display: block;
	font-weight: 500;
}

/* 媒体展示区样式 */
.media-container {
	width: 100%;
	height: 400rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	overflow: hidden;
}

.step-media {
	width: 100%;
	height: 100%;
}

/* 步骤描述样式 */
.step-description {
	background-color: #ffffff;
	padding: 30rpx;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
}

.description-text {
	font-size: 28rpx;
	color: #666666;
	line-height: 1.8;
}

/* 步骤提示样式 */
.step-tips {
	background-color: #ffffff;
	padding: 30rpx;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
}

.tips-title {
	font-size: 28rpx;
	color: #666666;
	margin-bottom: 20rpx;
	display: block;
}

.tips-content {
	font-size: 28rpx;
	color: #666666;
	line-height: 1.8;
}

/* 底部按钮样式 */
.bottom-buttons {
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}

.nav-btn {
	width: 45%;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	border-radius: 44rpx;
	font-size: 28rpx;
	color: #ffffff;
	background: linear-gradient(45deg, #4CAF50, #45a049);
	box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
	transition: all 0.3s ease;
}

.nav-btn:active {
	transform: scale(0.98);
	box-shadow: 0 2px 6px rgba(76, 175, 80, 0.1);
}

.prev-btn {
	opacity: 0.8;
}

.next-btn {
	background-color: #4CAF50;
}

.text-content {
	padding: 20rpx;
	background-color: #f5f5f5;
	border-radius: 8rpx;
}

.text-content text {
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
}

/* 产品图片展示样式 */
.product-images-container {
	margin-bottom: 30rpx;
}

.product-images-title {
	font-size: 32rpx;
	color: #333333;
	margin-bottom: 20rpx;
	display: block;
	font-weight: 500;
}

.product-images-list {
	display: flex;
	flex-wrap: wrap;
}

.product-image {
	width: 33.33%;
	height: 200rpx;
	margin-bottom: 10rpx;
	margin-right: 10rpx;
	border-radius: 8rpx;
	overflow: hidden;
}
</style>
